<template>
  <div class="myinfo">
    <NavBar title="个人信息" path="/home/my" right="保存"></NavBar>
    <div class="basicInfo">
      <ul class="contentItem">
        <li @click="showedit">
          <div class="left">头像</div>
          <div class="right">
            <img :src="myinfoList.photo" alt="" />
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
        <li @click="shownameedit">
          <div class="left">昵称</div>
          <div class="right">
            <div class="nickname">
              {{ nickname }}
            </div>
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
        <li @click="shownintroedit">
          <div class="left">介绍</div>
          <div class="right">
            <div class="introduce">{{ myinfoList.intro }}</div>
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="basicInfo">
      <ul class="contentItem">
        <li>
          <div class="left">性别</div>
          <div class="right">
            <div class="gender">
              {{ gender[myinfoList.gender] }}
            </div>
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
        <li>
          <div class="left">生日</div>
          <div class="right">
            <div class="birthday">
              {{ myinfoList.birthday }}
            </div>
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </li>
      </ul>
    </div>
    <van-popup round v-model="showphoto">
      <ul class="photoEdit">
        <li>
          <van-uploader :after-read="afterRead">
            从相册中选择
          </van-uploader>
        </li>
        <li>拍照</li>
      </ul>
    </van-popup>
    <van-popup position="bottom" v-model="showname">
      <van-cell-group>
        <van-field
          label="修改昵称"
          v-model="nickname"
          placeholder="请输入昵称"
        />
      </van-cell-group>
    </van-popup>
    <van-popup position="bottom" v-model="shownintro">
      <van-cell-group>
        <van-field label="修改介绍" v-model="intro" placeholder="请输入昵称" />
      </van-cell-group>
    </van-popup>
  </div>
</template>
<script>
import { myinfo, upload } from '../../api/my'
export default {
  data () {
    return {
      myinfoList: {},
      gender: {
        0: '男',
        1: '女'
      },
      nickname: '',
      intro: '',
      showphoto: false,
      showname: false,
      shownintro: false
    }
  },
  mounted () {
    this.getMyInfo()
  },
  methods: {
    async getMyInfo () {
      const res = await myinfo()
      //   console.log(res)
      this.myinfoList = res.data.data
      this.nickname = this.myinfoList.name
    },
    showedit () {
      this.showphoto = true
    },
    shownameedit () {
      this.showname = true
    },
    shownintroedit () {
      this.shownintro = true
    },
    beforeRead (file) {
      const _type = file.type === 'image/png' || file.type === 'image/jpeg'
      const _size = file.size / 1024 / 1024 < 2
      if (!_type) {
        this.$toast.fail('请上传png或jpg格式的图片')
      }
      if (!_size) {
        this.$toast.fail('图片大小不能超过2M!')
      }
      return _type && _size
    },
    async afterRead (file) {
      //   console.log(file)
      const res = await upload({ photo: file.content })
      console.log(res)
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  .myinfo {
    background-color: #f5f7f9 !important;
    .basicInfo {
      background-color: #fff;
      .contentItem {
        padding-left: 15px;
        margin-bottom: 5px;
        li {
          height: 50px;
          line-height: 50px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #edeff3;
          padding-right: 15px;
          .left {
            font-size: 16px;
          }
          &:last-child {
            border-bottom: 0;
          }
          .right {
            position: relative;
            display: flex;
            img {
              position: absolute;
              right: 20px;
              top: 25px;
              transform: translateY(-50%);
              width: 25px;
              height: 25px;
              border-radius: 50%;
            }
            .nickname,
            .introduce,
            .gender,
            .birthday {
              font-size: 14px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .photoEdit {
    width: 200px;
    font-size: 16px;
    font-weight: normal;
    .upload {
      height: 50px;
      line-height: 50px;
    }
    li {
      height: 50px;
      padding: 0 15px;
      line-height: 50px;
      &:first-child {
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
</style>
